<template>
    <div>
        <!-- 轮播图 -->
        <mt-swipe :auto="4000">
            <!-- 父组件传递 carousel 数组进来 -->
            <mt-swipe-item v-for="(item,i) in carousel" :key="i">
                <a :href="item.url">
                    <!-- <img :src="item.img+'?'+(new Date()).getTime()"> -->
                    <img v-lazy="item.img+'?'+(new Date()).getHours()">
                </a>
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>

<script>
export default {
  props:["carousel"]
};
</script>

<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
    /* &:nth-child(1) {
      background-color: red;
    }
    &:nth-child(2) {
      background-color: blue;
    }
    &:nth-child(3) {
      background-color: cyan;
    } */    
    text-align: center;
    position: relative;
    img {
        height: 100%;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 200px;
      margin: auto;
    }
  }
}
</style>

